<template>
  <span
    v-if="mainStore.userInfo?.proxy_id !== 1377 && mainStore.userInfo?.proxy_id !== 1407"
    class="ml-2 forbidden-btn"
    @click="handleForbiddenText"
  >
    <question-circle-outlined class="mr-1" />
    禁售行业
  </span>

  <span
    class="ml-2 forbidden-btn"
    v-if="mainStore.userInfo?.proxy_id !== 1377 && mainStore.userInfo?.proxy_id !== 1407"
  >
    <question-circle-outlined class="mr-1" />
    <a href="https://e-baixing.feishu.cn/wiki/E76fwgu9BikeN4kBSK8cT6EFnPU" target="_blank">产品售卖政策</a>
  </span>
  <a-modal centered v-model:visible="forbiddenVisible" wrap-class-name="forbidden-dialog" :footer="null" :width="820">
    <scrollbar class="forbidden-dialog__scrollbar">
      <div v-if="BW || BWYXB || HJBW">
        <h1>禁售行业规则</h1>
        <div v-html="bwForbiddenRulesText"></div>
      </div>
      <div v-else>
        <h1>禁售行业规则</h1>
        <div v-html="forbiddenRulesText"></div>
        <h1 class="mt-5">推荐行业</h1>
        <div v-html="specialRulesText"></div>
        <a-image class="w-full" src="/images/cibao-rules-Img.jpg" />
      </div>
    </scrollbar>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, toRefs } from 'vue'
import { bwForbiddenRulesText, forbiddenRulesText, specialRulesText } from '@/shared/text'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import Scrollbar from '@/components/scrollbar/index.vue'
import { useCategory } from '@/hooks/useCategotry'
import { ProductEnum } from '@/core/enums/platform'
import { useMainStore } from '@/store/useMainStore'

const mainStore = useMainStore()
interface Props {
  category: ProductEnum
}

defineOptions({
  name: 'ForbiddenText'
})

const props = withDefaults(defineProps<Props>(), {
  category: ProductEnum.BW
})
const { category } = toRefs(props)
const { BW, BWYXB, HJBW } = useCategory(category)
const forbiddenVisible = ref(false)

function handleForbiddenText() {
  forbiddenVisible.value = true
}
</script>

<style lang="scss" scoped>
.forbidden-btn {
  text-decoration: 1px #ff4d4f underline;
  color: #ff4d4f;
  cursor: pointer;
}
</style>

<style lang="scss">
.forbidden-dialog {
  .ant-modal-content {
    height: calc(90vh);
    overflow: auto;
  }

  .ant-modal-body {
    height: 100%;
    padding-right: 0;
  }

  &__scrollbar {
    height: 100%;
    padding-right: 24px;
  }
}
</style>
